import "./Bill.css"
import { Button, Space, Table } from "antd";
import type { TableProps } from 'antd';
import { useEffect, useState } from "react";
import BillMock from "@/mock/BillMock";
import { history, Link } from "umi";

interface DataType {
  _id: string;
  roomNum: string;  //  房间号        例如：01栋2单元402
  getGain: string;  //  收费类型      例如：物业费
  unitPrice: number;  //  单价        例如：0.8
  period: string;      //  收费周期    例如：2021-01-01 ~ 2022-01-01
  costPrice: number;   //  费用合计    例如：1029.60
  billState: boolean;  //  缴费状态    例如：true
  payment: number,     //  滞纳金     例如：0
}

export default function test() {
  const [data, setData] = useState<DataType[]>([])
  const [pagesize, setPagesize] = useState(5)

  useEffect(() => {
    setData(BillMock)
  })

  const columns: TableProps<DataType>['columns'] = [
    {
      title: '房间号',
      dataIndex: 'roomNum',
      key: 'roomNum',
      render: (text) => <span>{text}</span>,
    },
    {
      title: '收费类型',
      dataIndex: 'getGain',
      key: 'getGain',
      render: (text) => <span>{text}</span>
    },
    {
      title: '单价',
      dataIndex: 'unitPrice',
      key: 'unitPrice',
      render: (text) => <span>{text}/m²</span>
    },
    {
      title: '收费周期',
      dataIndex: 'period',
      key: 'period',
      render: (text) => <span>{text}</span>
    },
    {
      title: '费用合计',
      dataIndex: 'costPrice',
      key: 'costPrice',
      render: (text) => <span>{text.toFixed(2)}元</span>
    },
    {
      title: '缴费状态',
      dataIndex: 'billState',
      key: 'billState',
      render: (text) => <span>{text ? '已缴费' : <span style={{ color: 'red' }}>未缴费</span>}</span>
    },
    {
      title: '滞纳金',
      dataIndex: 'payment',
      key: 'payment',
      render: (text) => <span>{text}</span>
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => { history.push(`/BillDetail/${JSON.stringify(record)}`) }}>编辑</a>
          <a onClick={() => { console.log(record) }}>删除</a>
        </Space>
      ),
    },
  ];

  // 选中数据的回调函数
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
  };

  return (
    <div className="Bill">
      <div className="Bill-header">
        <span>帐单列表</span>
        <div>
          <Button className="Bill-header-btn" type="primary">
            <Link to="/AddBill">+ 新建账单</Link>
          </Button>
          <Button className="Bill-header-btn">批量操作</Button>
        </div>
      </div>
      <div className="Bill-content">
        <Table<DataType>
          rowSelection={{ type: 'checkbox', onChange: onSelectChange }}
          columns={columns}
          dataSource={data}
          rowKey="_id"
          pagination={{
            position: ["bottomCenter"], // 分页器显示在底部
            pageSize: pagesize,        // 每页显示 5 条数据
            total: data.length, // 总数据条数
            showSizeChanger: true, // 允许用户改变每页显示的条数
            pageSizeOptions: [3, 5, 7, 9], // 每页显示条数的选项
            onShowSizeChange: (current, pageSize) => {  //  页码回调函数
              setPagesize(pageSize)
            }
          }} />
      </div>
    </div>
  )
}
